<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <link rel="stylesheet" href="ElementUI/index.css">
    <script src="ElementUI/vue.js"></script>
    <script src="ElementUI/index.js"></script>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: right;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 30px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

    </style>

</head>
<body>

<div id="app">

    <el-form v-bind:rules="myrules" v-bind:model="form">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="活动性质">

                <el-checkbox label="美食/餐厅线上活动" v-model="form.xm"></el-checkbox>
                <el-checkbox label="地推活动" v-model="form.xm"></el-checkbox>
                <el-checkbox label="线下主题活动" v-model="form.xm"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" v-model="form.xm"></el-checkbox>

        </el-form-item>

        <el-button type="success" plain v-on:click="save">成功按钮</el-button>

    </el-form>
    <div class="block" style="display: inline-block">
        <span class="demonstration">开始日期</span>
        <div class="demonstration">值：{{ value1 }}</div>
        <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
        </el-date-picker>
    </div>

    <div class="block" style="display: inline-block">
        <span class="demonstration">结束日期</span>
        <div class="demonstration">值：{{ value2 }}</div>
        <el-date-picker
                v-model="value2"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
        </el-date-picker>
    </div>

</div>

</body>


<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            value1:null,
            value2:null,

            form:{
                name:"ljwang",
                xm:[]
            },
            myrules:{

                name:[{ required: true, message: '请输入活动名称', trigger: 'blur' },
                     {
                         validator:(rule, value, callBack)=>{

                             if (value=="icqgame"){

                                 callBack();

                             }else{

                                 callBack("请输入icqgame");

                             }

                         }
                     }

                ]

            }

        },
        methods: {

            save(){
                console.log(this.form);
            }


        }
    })
</script>


</html>